@extends('layouts.mobile')

@section('title', $item['title'])

@section('content')
    <div class="swiper-div" style="padding-top: 80%;">
        <div class="swiper" id="swiper">
            <ul class="swiper-wrapper">
                @foreach($images as $img)
                    <li class="swiper-slide">
                        <div class="bg bg-cover" style="background-image: url({{image_url($img['image'])}})"></div>
                    </li>
                @endforeach
            </ul>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <script type="text/javascript">
        (function(){
            var swiper = new Swiper('#swiper', {loop:true,pagination:'.swiper-pagination',autoplay:2500});
        })();
    </script>
    <div class="item-info">
        <div class="price">
            <span>￥</span>
            <strong>{{$item['price']}}</strong>
        </div>
        <div class="title">{{$item['title']}}</div>
        @if ($item['subtitle'])
            <div class="subtitle">{{$item['subtitle']}}</div>
        @endif
        <div class="data">
            <div class="text">包邮</div>
            <div class="text align-center">已售{{$item['sold']}}</div>
            <div class="text align-right">{{$shop['province']}}{{$shop['city']}}</div>
        </div>
    </div>
    <div class="section-title">店铺信息</div>
    <div class="shop-info">
        <div class="info">
            <div class="logo bg-cover" style="background-image: url({{image_url($shop['logo'])}})"></div>
            <div class="name">
                <h3>{{$shop['shop_name']}}</h3>
                <p>掌柜:{{$shop['username']}}</p>
            </div>
        </div>
        <div class="data">
            <div class="item" style="border: 0;">
                <div class="p">{{$shop['visitors']}}</div>
                <div class="p">访客数</div>
            </div>
            <div class="item">
                <div class="p">{{$shop->items()->count()}}</div>
                <div class="p">商品数</div>
            </div>
            <div class="item">
                <div class="p">{{$shop['total_sold']}}</div>
                <div class="p">累计销量</div>
            </div>
        </div>
        <div class="visit">
            <div class="button" data-link="{{mobile_shop_url($shop['shop_id'])}}">进店看看</div>
        </div>
    </div>
    <div class="section-title">宝贝详情</div>
    <div class="item-content">{!! $content['content'] !!}</div>

    <div class="tabbar">
        <div class="bar">
            <div class="item-min-actions">
                <div class="action" data-link="{{mobile_shop_url($shop['shop_id'])}}">
                    <img src="{{asset('images/icons/shop.png')}}" class="i">
                    <div class="t">店铺</div>
                </div>
                <div class="action" id="favorite">
                    <img src="{{asset('images/icons/favor.png')}}" class="i">
                    <div class="t">收藏</div>
                </div>
                <div class="action" data-link="{{url('mobile/shop/profile/'.$shop['shop_id'])}}">
                    <img src="{{asset('images/icons/kefu.png')}}" class="i">
                    <div class="t">客服</div>
                </div>
            </div>
            <div class="item-auction-button" id="addToCart">加入购物车</div>
            <div class="item-auction-button" id="buyNow" style="background-color:#F6532D ">立即购买</div>
        </div>
    </div>

    <div class="dsxui-overlayer" id="overlayer" style="display: none;"></div>
    <div class="buybox" id="buybox">
        <form method="post" id="buyForm" action="{{url('mobile/auction/buynow')}}">
            {{csrf_field()}}
            <input type="hidden" name="itemid" value="{{$itemid}}">
            <div class="content">
                <div class="close" id="close">×</div>
                <div class="item-info">
                    <div class="image bg-cover" style="background-image: url({{image_url($item['thumb'])}})"></div>
                    <div class="con">
                        <div class="title">{{$item['title']}}</div>
                        <div class="flex"></div>
                        <div class="price">{{$item['price']}}</div>
                        <div class="stock">库存:@{{ stock }}</div>
                    </div>
                </div>

                <div class="actions">
                    <div class="group">
                        <div class="cell-left">购买数量</div>
                        <div class="cell-right">
                            <div class="quantity-box">
                                <div class="button" v-on:click="decrease()">-</div>
                                <input type="text" title="" name="quantity" class="text" :value="quantity">
                                <div class="button" v-on:click="increase()">+</div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="submit-btn" id="submitButton">确定</button>
                </div>
            </div>
        </form>
    </div>
@stop

@section('foot')
    <script type="text/javascript">
        var buybox = new Vue({
            el:'#buybox',
            data:{
                quantity:1,
                stock:{{$item['stock']}},
            },
            methods:{
                increase:function () {
                    this.quantity++;
                    if (this.quantity > this.stock){
                        this.quantity = this.stock;
                    }

                    this.stock--;
                    if (this.stock < 0) {
                        this.stock = 0
                    }
                },
                decrease:function () {
                    if (this.quantity > 1) {
                        this.quantity--;
                        this.stock++;
                    }
                }
            }
        });

        function showModalView(callback) {
            $("#overlayer").show();
            $("#buybox").animate({bottom:0}, 'fast');
            if (callback) callback();
        }

        $("#addToCart").on('tap', function () {
            showModalView(function () {
                $("#submitButton").on('tap', function () {
                    $.ajax({
                        type:'POST',
                        data: {itemid:'{{$itemid}}', quantity:buybox.quantity},
                        url: '/mobile/cart/add',
                        success:function (response) {
                            $("#buybox").animate({'bottom':'-100%'}, 'fast', function () {
                                $("#overlayer").hide();
                                DSXUI.showToast('已成功加入购物车');
                            });
                        }
                    });
                });
            });
        });

        $("#buyNow").on('tap', function () {
            showModalView(function () {
                $("#submitButton").on('tap', function () {
                    $("#buyForm").submit();
                });
            });
        });
        $("#buybox").on('tap', function (e) {
            DSXUtil.stopPropagation(e);
        });
        $("#close").on('tap', function () {
            $("#buybox").animate({'bottom':'-100%'}, 'fast', function () {
                $("#overlayer").hide();
            });
        });
        $("#favorite").on('tap', function () {
            $.ajax({
                url:'/user/collect/add',
                type:'POST',
                data:{dataid:'{{$itemid}}', datatype:'item'},
                success:function () {
                    DSXUI.showToast('已成功加入收藏夹');
                }
            })
        });
    </script>
@stop
